<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <div>
        <Col span="24">
            <Card>
                <p slot="title">
                    <Icon type="ios-people"></Icon>
                    系统用户
                </p>
                <Row>
                    <Input v-model="userName" v-hasPermission="'query'" placeholder="请输入用户名..." style="width: 200px"/>
                    <Select v-model="statusModell" v-hasPermission="'query'" placeholder="--请选择状态--"
                            style="width:200px">
                        <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                    <Button @click="handleSearchs()" type="primary" icon="search" v-hasPermission="'query'">搜索
                    </Button>
                    <Button @click="handleRefreshs()" type="primary" icon="refresh" v-hasPermission="'query'">刷新
                    </Button>
                </Row>
                <Row>
                    <Button style="width: auto;text-align:right;margin:15px 0 0 0;" v-hasPermission="'add'"
                            icon="person-add"
                            type="primary"
                            @click="openModal(null)" long>{{ $t('btnAddText') }}
                    </Button>
                </Row>
                <br/>
                <Row>
                    <Table border :columns="columns" :data="userData" @on-sort-change="sortClick"></Table>
                </Row>
                <Row class="margin-top-10" style="text-align: right;padding-right:20px;">
                    <Page :total="total" :current="pageNum" :page-size="pageSize" @on-change="handleCurrentChange"
                          @on-page-size-change="handleSizeChange"
                          size="small" show-elevator show-sizer></Page>
                </Row>
            </Card>
            <AddUser v-if="addUserModal" @cancel="onModalCancel"/>
            <FreezeUser v-if="freezeUserModal" :userId="chooseUserId" :userName="chooseUserName"
                        @cancel="onModalCancel"/>
            <UnFreezeUser v-if="unfreezeUserModal" :userId="chooseUserId" :userName="chooseUserName"
                          @cancel="onModalCancel"/>
            <DeleteUser v-if="deleteUserModal" :userId="chooseUserId" :userName="chooseUserName"
                        @cancel="onModalCancel"/>
            <ResetPassword v-if="resetPasswordModal" :userId="chooseUserId" :userName="chooseUserName"
                           @cancel="onModalCancel"/>
        </Col>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    import AddUser from './components/user/addUser.vue';
    import FreezeUser from './components/user/freezeUser.vue';
    import UnFreezeUser from './components/user/unfreezeUser.vue';
    import DeleteUser from './components/user/deleteUser.vue';
    import ResetPassword from './components/user/resetPassword.vue';

    export default {
        name: 'user-table',
        components: {
            AddUser, FreezeUser, UnFreezeUser, DeleteUser, ResetPassword
        },
        data() {
            return {
                addUserModal: false,
                freezeUserModal: false,
                unfreezeUserModal: false,
                deleteUserModal: false,
                resetPasswordModal: false,
                permission: {
                    lock: false,
                    unlock: false,
                    reset: false,
                    delete: false
                },
                chooseUserId: '',
                chooseUserName: '',
                valueText: 3,
                showModal: false,
                loading: false,
                userName: '',
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        align: 'center',
                        width: 80
                    },
                    {
                        title: 'ID',
                        align: 'center',
                        key: 'id',
                        sortable: true
                    },
                    {
                        title: '登录名',
                        align: 'center',
                        key: 'userName'
                    },
                    {
                        title: '用户姓名',
                        align: 'center',
                        key: 'nickName'
                    },
                    {
                        title: '角色',
                        align: 'center',
                        key: 'roles',
                        render: (h, params) => {
                            let roles = [];
                            if (params.row.roles !== null && params.row.roles.length > 0) {
                                params.row.roles.forEach(element => {
                                    let role = h('Tag', {
                                        props: {
                                            color: 'blue'
                                        }
                                    }, element);
                                    roles.push(role);
                                });
                                return h('div', roles);
                            }
                            return h('span', '空');
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'status',
                        render: function (h, params) {
                            var status = params.row[params.column.key];
                            var statusDesc;
                            if (status === '1') {
                                statusDesc = '正常';
                            } else if (status === '2') {
                                statusDesc = '锁定';
                            }
                            return h('span', statusDesc);
                        },
                        sortable: true
                    },
                    {
                        title: '登录时间',
                        align: 'center',
                        key: 'loginTime',
                        render: function (h, params) {
                            var time = params.row[params.column.key];
                            var timeDesc;
                            if (time) {
                                timeDesc = window.app.$moment(time).format('YYYY-MM-DD HH:mm:ss');
                            }
                            return h('span', timeDesc);
                        },
                        sortable: true
                    },
                    {
                        title: '登录IP',
                        align: 'center',
                        key: 'loginIp'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        render: (h, params) => {
                            let btns = [];
                            if (this.permission.lock) {
                                (params.row.status === '0' || params.row.status === '1') && btns.push(h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        hasPermission: 'lock'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.freeze(this.userData, params.index);
                                        }
                                    }
                                }, '锁定'));
                            }
                            if (this.permission.unlock) {
                                params.row.status === '2' && btns.push(h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.unfreeze(this.userData, params.index);
                                        }
                                    }
                                }, '解锁'));
                            }
                            if (this.permission.reset) {
                                btns.push(h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.reset(this.userData, params.index);
                                        }
                                    }
                                }, '重置密码'));
                            }
                            if (this.permission.delete) {
                                btns.push(h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(this.userData, params.index);
                                        }
                                    }
                                }, '删除'));
                            }
                            return h('div', btns);
                        }
                    }
                ],
                userData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                statusList: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '正常'
                    },
                    {
                        value: '2',
                        label: '锁定'
                    }
                ],
                statusModell: ''
            };
        },
        methods: {
            ...mapActions(['getSystemUsers', 'getMenuFuction']),
            handleGetUser(sort) {
                this.getSystemUsers({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    userName: this.userName,
                    status: this.statusModell,
                    sort: sort
                }).then(res => {
                    if (res.data) {
                        this.total = parseInt(res.data.total);
                        this.pageNum = res.data.pageNum;
                        this.userData = res.data.list;
                    } else {
                        this.$Message.error(this.$t('queryDataFailed'));
                    }
                });
            },
            sortClick(column) {
                var order = column.order === 'normal' ? 'asc' : column.order;
                var sort = column.key + ' ' + order;
                this.handleGetUser(sort);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.handleGetUser();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.handleGetUser();
            },
            freeze(val, index) {
                this.openModal(val[index]['id'], 'freeze', val[index]['userName']);
            },
            unfreeze(val, index) {
                this.openModal(val[index]['id'], 'unfreeze', val[index]['userName']);
            },
            reset(val, index) {
                this.openModal(val[index]['id'], 'reset', val[index]['userName']);
            },
            remove(val, index) {
                this.openModal(val[index]['id'], 'delete', val[index]['userName']);
            },
            openModal(uid, type = 'freeze', uname = '') {
                if (uid === null) {
                    this.addUserModal = true;
                } else if (type === 'freeze') {
                    this.chooseUserId = uid;
                    this.chooseUserName = uname;
                    this.freezeUserModal = true;
                } else if (type === 'unfreeze') {
                    this.chooseUserId = uid;
                    this.chooseUserName = uname;
                    this.unfreezeUserModal = true;
                } else if (type === 'reset') {
                    this.chooseUserId = uid;
                    this.chooseUserName = uname;
                    this.resetPasswordModal = true;
                } else {
                    this.chooseUserId = uid;
                    this.chooseUserName = uname;
                    this.deleteUserModal = true;
                }
            },
            onModalCancel(type, reload = false) {
                switch (type) {
                    case 'add': {
                        this.addUserModal = false;
                        break;
                    }
                    case 'freeze': {
                        this.freezeUserModal = false;
                        break;
                    }
                    case 'unfreeze': {
                        this.unfreezeUserModal = false;
                        break;
                    }
                    case 'reset': {
                        this.resetPasswordModal = false;
                        break;
                    }
                    case 'delete': {
                        this.deleteUserModal = false;
                        break;
                    }
                }
                if (reload) this.handleGetUser();
            },
            handleSearchs() {
                this.handleGetUser();
            },
            handleRefreshs() {
                this.handleGetUser();
            }
        },
        created() {
            this.handleGetUser();
            let permissionList = this.$route.meta.permission;
            if (permissionList && permissionList.length && permissionList.includes('lock')) {
                this.permission.lock = true;
            }
            if (permissionList && permissionList.length && permissionList.includes('unlock')) {
                this.permission.unlock = true;
            }
            if (permissionList && permissionList.length && permissionList.includes('reset')) {
                this.permission.reset = true;
            }
            if (permissionList && permissionList.length && permissionList.includes('delete')) {
                this.permission.delete = true;
            }
        }
    };
</script>
